@if (fetchedMetadata && fetchedMetadata.title) {
  <form [formGroup]="metadataForm" class="metapicker flex flex-col w-full">
    <div class="flex-grow overflow-auto">
      <div class="metaheader relative flex items-center">
        <label class="w-[12%]"></label>
        <div class="flex w-full items-center">
          <p class="!w-1/2 pr-3" style="text-align:right">Current Metadata</p>
          <div class="midbuttons">
            <p-button
              size="small"
              severity="success"
              icon="pi pi-angle-left"
              class="mx-2"
              [outlined]="true"
              pTooltip="Move all missing fields"
              tooltipPosition="bottom"
              (onClick)="copyMissing()"
            ></p-button>
            <p-button
              size="small"
              severity="success"
              icon="pi pi-angle-double-left"
              class="mx-2"
              [outlined]="true"
              pTooltip="Move all fields"
              tooltipPosition="bottom"
              (onClick)="copyAll()"
            ></p-button>
          </div>
          <p class="!w-1/2 pl-3">Fetched Metadata</p>
        </div>
        <div class="ml-auto absolute" style="right:1rem">
          <p-button
            size="small"
            severity="warn"
            icon="pi pi-refresh"
            label="Reset"
            [outlined]="true"
            pTooltip="Reset all fields to original values"
            tooltipPosition="bottom"
            (onClick)="confirmReset()"
          ></p-button>
        </div>
      </div>
      <div class="metacontent">
        <div class="flex items-center py-1">
          <label class="w-[12%] text-sm">Cover</label>
          <div class="flex w-full items-center justify-center">
            <p-image class="thumbnail" [src]="metadataForm.get('thumbnailUrl')?.value" alt="Image" appendTo="body" lazyLoad [preview]="true"></p-image>
            <input type="hidden" id="thumbnailUrl" formControlName="thumbnailUrl" class="!w-1/2"/>
            <p-button
              size="small"
              [icon]="isValueSaved('thumbnailUrl') ? 'pi pi-check' : (hoveredFields['thumbnailUrl'] && isValueCopied('thumbnailUrl') ? 'pi pi-times' : 'pi pi-arrow-left')"
              [outlined]="true"
              [ngClass]="
              {
                'green-outlined-button': isValueCopied('thumbnailUrl') && !hoveredFields['thumbnailUrl'],
                'red-outlined-button': isValueCopied('thumbnailUrl') && hoveredFields['thumbnailUrl']
              }"
              class="arrow-button"
              (click)="hoveredFields['thumbnailUrl'] && isValueCopied('thumbnailUrl') ? resetField('thumbnailUrl') : copyFetchedToCurrent('thumbnailUrl')"
              (mouseenter)="onMouseEnter('thumbnailUrl')"
              (mouseleave)="onMouseLeave('thumbnailUrl')"/>
            <input type="hidden" [value]="fetchedMetadata.thumbnailUrl" class="!w-1/2" readonly/>
            <p-image class="thumbnail" [src]="fetchedMetadata.thumbnailUrl!" alt="Image" appendTo="body" lazyLoad [preview]="true"></p-image>
          </div>
        </div>
        @for (field of metadataFieldsTop; track field) {
          <div class="flex items-center py-1">
            <label for="{{field.controlName}}" class="w-[12%] text-sm">{{ field.label }}</label>
            <div class="flex w-full">
              <input
                pSize="small"
                fluid
                pInputText
                id="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                class="!w-1/2"
                [ngClass]="{
                'outlined-input-green': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
              }"
              />
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"
                [outlined]="true"
                [ngClass]="
                {
                  'green-outlined-button': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                  'red-outlined-button': isValueCopied(field.controlName) && hoveredFields[field.controlName]
                }"
                class="arrow-button"
                (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                (mouseenter)="onMouseEnter(field.controlName)"
                (mouseleave)="onMouseLeave(field.controlName)"/>
              <input pSize="small" pInputText [value]="fetchedMetadata[field.fetchedKey] ?? null" class="!w-1/2" readonly/>
            </div>
          </div>
        }
        @for (field of metadataChips; track field) {
          <div class="flex items-center py-1">
            <label for="{{field.controlName}}" class="w-[12%] text-sm">{{ field.label }}</label>
            <div class="flex w-full items-center">
              <p-autoComplete
                size="small"
                formControlName="{{field.controlName}}"
                [multiple]="true"
                [typeahead]="false"
                [dropdown]="false"
                [forceSelection]="false"
                class="w-full"
                [ngClass]="{'outlined-input-green': isValueCopied(field.controlName) && !hoveredFields[field.controlName]}"
                (onBlur)="onAutoCompleteBlur(field.controlName, $event)"/>
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"
                [outlined]="true"
                [ngClass]="
                {
                  'green-outlined-button': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                  'red-outlined-button': isValueCopied(field.controlName) && hoveredFields[field.controlName]
                }"
                class="arrow-button"
                (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                (mouseenter)="onMouseEnter(field.controlName)"
                (mouseleave)="onMouseLeave(field.controlName)"/>
              <p-autoComplete
                size="small"
                [ngModel]="fetchedMetadata[field.fetchedKey] ?? []"
                [ngModelOptions]="{standalone:true}"
                [disabled]="true"
                [multiple]="true"
                [typeahead]="false"
                [dropdown]="false"
                [forceSelection]="false"
                class="w-full"/>
            </div>
          </div>
        }
        @for (field of metadataDescription; track field) {
          <div class="flex items-center py-1">
            <label for="{{field.controlName}}" class="w-[12%] text-sm">{{ field.label }}</label>
            <div class="flex w-full items-center">
              <textarea
                rows="2"
                pSize="small"
                pTextarea
                id="{{field.controlName}}"
                formControlName="{{field.controlName}}"
                class="!w-1/2"
                [ngClass]="{'outlined-input-green': isValueCopied(field.controlName) && !hoveredFields[field.controlName]}"
              ></textarea>
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"
                [outlined]="true"
                [ngClass]="
                {
                  'green-outlined-button': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                  'red-outlined-button': isValueCopied(field.controlName) && hoveredFields[field.controlName]
                }"
                class="arrow-button"
                (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                (mouseenter)="onMouseEnter(field.controlName)"
                (mouseleave)="onMouseLeave(field.controlName)"/>
              <textarea
                rows="2"
                pSize="small"
                pInputText
                [value]="fetchedMetadata[field.fetchedKey] ?? null"
                class="!w-1/2"
                readonly></textarea>
            </div>
          </div>
        }
        @for (field of metadataFieldsBottom; track field) {
          <div class="flex items-center py-1">
            <label for="{{field.controlName}}" class="w-[12%] text-sm">{{ field.label }}</label>
            <div class="flex w-full">
              <input pInputText pSize="small" id="{{field.controlName}}" formControlName="{{field.controlName}}" class="!w-1/2"
                     [ngClass]="{
                  'outlined-input-green': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                }"
              />
              <p-button
                size="small"
                [icon]="isValueSaved(field.controlName) ? 'pi pi-check' : (hoveredFields[field.controlName] && isValueCopied(field.controlName) ? 'pi pi-times' : 'pi pi-arrow-left')"
                [outlined]="true"
                [ngClass]="
                {
                  'green-outlined-button': isValueCopied(field.controlName) && !hoveredFields[field.controlName],
                  'red-outlined-button': isValueCopied(field.controlName) && hoveredFields[field.controlName]
                }"
                class="arrow-button"
                (click)="hoveredFields[field.controlName] && isValueCopied(field.controlName) ? resetField(field.controlName) : copyFetchedToCurrent(field.controlName)"
                (mouseenter)="onMouseEnter(field.controlName)"
                (mouseleave)="onMouseLeave(field.controlName)"/>
              <input pInputText pSize="small" [value]="fetchedMetadata[field.fetchedKey] ?? null" class="!w-1/2" readonly/>
            </div>
          </div>
        }
      </div>
    </div>
  </form>
} @else {
  <form [formGroup]="metadataForm" class="metapicker flex w-full">
    <div class="flex-grow overflow-auto">
      <div class="metaheader relative flex items-center">
        <p class="text-sm flex items-center" style="gap: 0.5rem">
          <i class="pi metadata-status pi-exclamation-triangle not-applied"></i>
          Unable to fetch new metadata for this file
        </p>
        <p-button
          size="small"
          severity="warn"
          icon="pi pi-refresh"
          label="Reset"
          [outlined]="true"
          pTooltip="Reset all fields to original values"
          tooltipPosition="bottom"
          (onClick)="confirmReset()"
        ></p-button>
      </div>
      <div class="flex flex-row">
        <div class="w-[25%] h-full flex items-start justify-center pl-4">
          <div class="w-full h-full">
            <img
              [src]="metadataForm.get('thumbnailUrl')?.value"
              alt="Book Thumbnail"
              class="w-full h-full object-contain"
            />
            <input type="hidden" id="thumbnailUrl" formControlName="thumbnailUrl"/>
          </div>
        </div>

        <div class="metacontent w-[75%]">
          @for (field of metadataFieldsTop; track field) {
            <div class="flex items-center py-1">
              <label for="{{field.controlName}}" class="w-[15%] text-sm">{{ field.label }}</label>
              <div class="flex w-full">
                <input
                  pSize="small"
                  fluid
                  pInputText
                  id="{{field.controlName}}"
                  formControlName="{{field.controlName}}"
                />
              </div>
            </div>
          }

          @for (field of metadataChips; track field) {
            <div class="flex items-center py-1">
              <label for="{{field.controlName}}" class="w-[15%] text-sm">{{ field.label }}</label>
              <div class="flex w-full">
                <p-autoComplete formControlName="{{field.controlName}}" [multiple]="true" [typeahead]="false" [dropdown]="false" [forceSelection]="false" class="w-full" (onBlur)="onAutoCompleteBlur(field.controlName, $event)"></p-autoComplete>
              </div>
            </div>
          }

          @for (field of metadataDescription; track field) {
            <div class="flex items-center py-1">
              <label for="{{field.controlName}}" class="w-[15%] text-sm">{{ field.label }}</label>
              <div class="flex w-full">
                <textarea fluid rows="2" pTextarea id="{{field.controlName}}" formControlName="{{field.controlName}}"></textarea>
              </div>
            </div>
          }

          @for (field of metadataFieldsBottom; track field) {
            <div class="flex items-center py-1">
              <label for="{{field.controlName}}" class="w-[15%] text-sm">{{ field.label }}</label>
              <div class="flex w-full">
                <input
                  fluid
                  pInputText
                  pSize="small"
                  id="{{field.controlName}}"
                  formControlName="{{field.controlName}}"
                />
              </div>
            </div>
          }
        </div>
      </div>  
    </div>
  </form>
}
